<template>
	<DialogBox
		v-if="drawerVisible"
		v-model:visible="drawerVisible"
		:title="`${drawerProps.title}${$t('group_form.dialog_title.group')}`"
		width="550px"
	>
		<el-form
			class="pr-8"
			ref="ruleFormRef"
			label-width="100px"
			label-suffix=" :"
			:rules="rules"
			:disabled="drawerProps.isView"
			:model="drawerProps.rowData"
			:hide-required-asterisk="drawerProps.isView"
		>
			<el-form-item :label="$t('group_form.form_label.deptname')" prop="deptName">
				<el-input v-model="drawerProps.rowData!.deptName" />
			</el-form-item>
			<el-form-item :label="$t('group_form.form_label.parentid')" prop="parentId">
				<el-tree-select
					v-model="drawerProps.rowData!.parentId"
					:data="parentDeptTree"
					check-strictly
					:placeholder="$t('group_form.select.placeholder')"
					clearable
					class="w-full"
					default-expand-all
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="drawerVisible = false">{{ $t("group_form.btn.concel") }}</el-button>
			<el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">{{ $t("group_form.btn.confirm") }}</el-button>
		</template>
	</DialogBox>
</template>

<script setup lang="ts" name="UserDrawer">
import DialogBox from "@/components/DialogBox";
import { FormInstance } from "element-plus";
import { ComponentInternalInstance, reactive, ref } from "vue";
import { DeptModel } from "../interface";
// import { GlobalStore } from "@/stores";
import { getDeptList } from "@/api/modules/dept";
import { MessageType } from "@/enums/messageEnum";
import { getTreeList } from "@/utils/treeUtil";
import { showMsg, showTips } from "@/utils/util";
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const rules = reactive({
	deptName: [{ required: true, message: proxy?.$t("group_form.rules.dept_name") }]
});
interface DrawerProps {
	title: string;
	isView: boolean;
	rowData?: DeptModel;
	api?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
	isView: false,
	title: ""
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps): Promise<void> => {
	drawerProps.value = params;
	await getAllDept();
	drawerVisible.value = true;
};
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	if (drawerProps.value.rowData?.id && drawerProps.value.rowData?.parentId == drawerProps.value.rowData?.id) {
		showMsg(proxy?.$t("group_form.msg.handle"), MessageType.warning);
		return;
	}
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			let { code, message } = await drawerProps.value.api!(drawerProps.value.rowData);
			let ok = showTips(
				code,
				drawerProps.value.rowData?.id ? proxy?.$t("group_form.tips.modify") : proxy?.$t("group_form.tips.add"),
				message
			);
			// ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
			if (ok) {
				drawerProps.value.getTableList!();
				drawerVisible.value = false;
			}
		} catch (error) {
			console.log(error);
		}
	});
};

//获取角色分组权限
const parentDeptTree = ref<any>({});
const getAllDept = async () => {
	if (drawerProps.value.rowData) {
		// const { userInfo } = GlobalStore();
		let { result } = await getDeptList();
		parentDeptTree.value = getTreeList(result.records.children, "id", "deptName", drawerProps.value.rowData.id);
		drawerProps.value.rowData.parentId =
			drawerProps.value.rowData?.parentId || (result.records.children.length > 0 && result.records.children[0].id) || "";
		drawerProps.value.rowData.parentId = drawerProps.value.rowData.id == "root" ? "" : drawerProps.value.rowData.parentId;
	}
};

defineExpose({
	acceptParams
});
</script>
